<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #btnAdds {
        background-color: rgb(51, 140, 183);
        color: #fff;
      }
    </style>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
    <script src="./lib/template-web.js"></script>
    <script src="./lib/axios.js"></script>
  </head>

  <body style="padding: 15px">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">图书表格</h3>
      </div>
      <div class="panel-body form-inline">
        <div class="input-group">
          <div class="input-group-addon">书名</div>
          <input
            type="text"
            class="form-control"
            id="iptBookname"
            placeholder="请输入书名"
          />
        </div>
        <div class="input-group">
          <div class="input-group-addon">作者</div>
          <input
            type="text"
            class="form-control"
            id="iptAuthor"
            placeholder="请输入作者"
          />
        </div>
        <div class="input-group">
          <div class="input-group-addon">出版社</div>
          <input
            type="text"
            class="form-control"
            id="iptPublisher"
            placeholder="请输入出版社"
          />
        </div>
        <button id="btnAdd" class="btn btn-primary">添加</button>
        <button id="btnAdds" class="btn btn-primary">查找</button>
      </div>
    </div>

    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tb">
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>
    <script type="text/html" id="news">
        {{each}}
        <tr>
            <td>{{$value.id}}</td>
            <td>{{$value.bookname}}</td>
            <td>{{$value.author}}</td>
            <td>{{$value.publisher}}</td>
            <td><a href="" data-id={{$value.id}}></a>删除</td>
          </tr>
        {{/each}}
    </script>

    <script>
      const baseUrl = 'http://ajax-base-api-t.itheima.net'

      const render = () => {
        $.ajax({
          type: 'GET',
          url: baseUrl + '/api/getbooks',
          data: null,
          success: (res) => {
            // console.log(res);
            const { status, msg, data } = res
            if (status !== 200) return alert(msg)

            const htmlStr = template('news', data)
            document.querySelector('#tb').innerHTML = htmlStr
          },
        })
      }
      render()


      // 添加数据  
        const addlist = document.querySelector('#btnAdd')
           const Bookname = document.querySelector('#iptBookname')
           const Author = document.querySelector('#iptAuthor')
           const Publisher = document.querySelector('#iptPublisher')
        //    绑定事件
            // addlist.addEventListener('click',() =>{
            //     // console.log(1);
            //     const  bookData = {
            //         bookname: Bookname.value.trim(),
            //         author:Author.value.trim(),
            //         publisher:Publisher.value.trim(),
            //     }
            //     $.ajax({
            //         type:'POST',
            //         url:baseUrl+'/api/addbook',
            //         data:bookData,
            //         success: res => {
            //         const {status ,msg} = res
            //         alert(msg)
            //          if(status!== 201)  return 
            //          Bookname.value =''  
            //          Author.value=''  
            //          Publisher.value =''  
            //          render()
            //         },                   
            //     })               
            // })    
            // render()
              addlist.addEventListener('click',function(){
                const  bookData = {
                    bookname: Bookname.value.trim(),
                    author:Author.value.trim(),
                    publisher:Publisher.value.trim(),
                }
                 axios({
                  method:'POST',
                  url:'http://ajax-base-api-t.itheima.net/api/addbook',
                  data:bookData,
                  params:null,
                 }).then(res =>{
                  console.log(res);
                  const {data:{status ,msg}} = res
                    alert(msg)
                     if(status!== 201)  return 
                     Bookname.value =''  
                     Author.value=''  
                     Publisher.value =''  
                     render()
                 })
              })
              render()


              //  删除数据
      const   shan = document.querySelector('#tb')
      shan.addEventListener('click',function(e){
        // console.log(1);
        const id = e.target.dataset.id
      if(e.target.tagName == 'A'){
        $.ajax({
          type:'GET',
          url:baseUrl+'/api/delbook',
          data:{id,
          },
          success:res =>{
            const {status,msg} =res
            if(status !== 200 ) return  alert(msg)
                render()
          }
        })
      }
      })
      // $('#tb').on('click','.delete',function(){
      //       let  id= $(this).attr('data-id')
      //       // console.log($(this).attr('data-id'));
      //       $.ajax({
      //           type:'GET',
      //           url:baseUrl+'/api/delbook',
      //           data:{
      //               id:id,
      //           },
      //           success: res => {
      //               const {msg} = res
      //               alert(msg)
      //               render()
      //           }
      //       })
      //   })


        // 查找数据
        const btnAdds =document.querySelector('#btnAdds')
            // console.log(1);
            btnAdds.addEventListener('click',function(){
                
                  const  bookname =  Bookname.value.trim()
                   const author = Author.value.trim()
                  const publisher = Publisher.value.trim()
                
                $.ajax({
                    type:'GET',
                    url:baseUrl+'/api/getbooks',
                    data:null,
                    success: res =>{
                       const {status ,msg,data} = res
                               // console.log(res);     
                     const  newData = data.filter(function(item){
                          if(item.bookname == bookname ||
                          item.author==author || 
                          item.publisher==publisher){
                                 return  item
                          }
                     })   
                             //  console.log(newData);
                      const htmlStr = template('news', newData)
                      document.querySelector('#tb').innerHTML = htmlStr  
                    }
                })
            })
                      render()
    </script>
  </body>
</html>
